import { useState, useEffect } from "react";
import { Image } from "antd";
import "@/styles/newsUpdate.css";

import BANNER5 from "assets/banner5.jpg";
import WQPL02 from "assets/02_wqpl.jpg";

import { getNewsUpdate } from "@/utils/request/index";


function newsUpdate() {

  const [newsUpdate, setNewsUpdate] = useState({
    category: [],
    lists: [],
  });

  function loadGetNewsUpdate(){
    getNewsUpdate().then((res) => {
      setNewsUpdate({
        category: res.category,
        lists: res.lists,
      });
    });
  }

  useEffect(() => {
    loadGetNewsUpdate()
  }, []);

  return (
    <>
      <div id="bannerShow">
        <a href="#">
          <Image src={BANNER5} alt="" />
        </a>
      </div>
      <div id="breadcrumb">
        <div className="container">
          <a href="index">首页</a>
          <span> >> </span>
          <a href="newsUpdate">新闻动态</a>
        </div>
      </div>
      <div id="select" className="container">
        <div className="title">
          <h1 className="chinese">新闻动态</h1>
        </div>
        <div className="content clearfix">
          <div className="list">
            {newsUpdate.category.map((item,index)=>{
              return <a href="#" key={index}>{item.title}</a>
            })}
            <Image src={WQPL02} alt="wqpl" />
          </div>
          <div className="news right">
            <ul>
              {newsUpdate.lists.map((item,index)=>{
                return (
                  <li key={index}>
                    <a href="newsDetails">
                      <h2>{item.title}</h2>
                      <span>{item.createTime}</span>
                      <p>
                        {item.description}
                      </p>
                    </a>
                  </li>
                )
              })}
            </ul>

            <div className="bottom clearfix">
              <span>共27条记录</span>
              <a href="#">1</a>
              <a href="#">2</a>
              <a href="#">3</a>
              <a href="#">下一页</a>
              <a href="#">末页</a>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default newsUpdate;
